import React, { Component, } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';


const styles = StyleSheet.create({
  container:
  {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 20,
    backgroundColor: '#FFFFFF',
  },

  titleContainer:
  {
    flexDirection: "row",
    borderColor: '#acffac',
    marginRight: 10,
    marginLeft: 10,
    marginTop: 10,
    padding: 10,
  },

  boxContainer:
  {
    flexDirection: "row",
    marginRight: 15,
    marginLeft: 15,
    paddingBottom: 10
  },

  textContainer:
  {
    // backgroundColor: "#00ff66",
    flexDirection: "column",
    marginRight: 10,
    marginLeft: 10,
  },

  boxText: {
    color: "#212121",
    fontSize: 16,
    paddingBottom: 10,
  },

  line:
  {
    width: 280,
    marginBottom: 8,
    marginTop: 8,
    height: 0.6,
    backgroundColor: "#E5E5E5",
  },
  icon: {
    width: 22,
    height: 22
  }
});

export default class InWard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inwardData: {
        bankAbaNo: "",
        bankAddress: "",
        bankCard: "",
        bankName: "",
        bankSwiftNo: "",
        receiverAddress: "",
        receiverName: "",
        remark: "",
      },
    };
  }

  getInfo() {
    console.log("=====getInfo");
    this.state.inwardData = {
      bankAbaNo: "12345789",
      bankAddress: "回龙观",
      bankCard: "0001654915789",
      bankName: "工商银行",
      bankSwiftNo: "123963852",
      receiverAddress: "回龙观分行",
      receiverName: "阿巴阿巴",
      remark: "附言",
    };
  }


  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '关于我们',
  });

  componentDidMount() {
    this.props.navigation.setParams({
      goBack: this.goBack,
    });
    this.getInfo();
  }

  goBack = () => {
    this.props.navigation.navigate('Home');
  };

  render() {
    const { navigation, } = this.props;
    return (
      <View style={styles.container}>
        {/* <View style={styles.titleContainer}>
          <Text style={height = 100}>
            顶部背景预留
          </Text>
        </View> */}

        <View style={styles.boxContainer}>
          <Image resizeMode="contain" style={styles.icon} source={{ uri: 'http://120.48.109.211:8088/static/icon/address.png', }} />
          <View style={styles.textContainer}>
            <Text style={styles.boxText}>
                Payment办公地址： 450 Serra Mall, Stanford, CA 94305
            </Text>
            <View style={styles.line} />
          </View>
        </View>

        <View style={styles.boxContainer}>
          <Image resizeMode="contain" style={styles.icon} source={{ uri: 'http://120.48.109.211:8088/static/icon/phone.png', }} />
          <View style={styles.textContainer}>
            <Text style={styles.boxText}>
                服务热线：18618163943
            </Text>
            <View style={styles.line} />
          </View>
        </View>

        <View style={styles.boxContainer}>
        <Image resizeMode="contain" style={styles.icon} source={{ uri: 'http://120.48.109.211:8088/static/icon/email.png', }} />
          <View style={styles.textContainer}>
            <Text style={styles.boxText}>
                客服邮箱：support@payment.com
            </Text>
            <View style={styles.line} />
          </View>
        </View>
      </View>
    );
  }
}
